/*
 * Copyright (C) 2018 Google LLC.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* ==========================================================================
   Article
   ========================================================================== */

.c-article {

}

.c-article__container {
  display: block;
}

@media (min-width: 42rem) {
  .c-article__container {
    display: flex;
  }
}

.c-article__main {
  max-width: 76rem; // 760px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
  @include fs--body;

  > * {
    margin-bottom: 1.8rem;
    color: rgba($c__black, .7);
  }

  /*
   * The stylesheet sets a default margin of 0 on everything. Then it overrides
   * it above -- but only for direct children of the main article div. To
   * restore the margin for paragraphs nested inside other elements (like
   * lists), we need another rule.
   */
  * p {
    margin-bottom: 1.8rem;
  }

  a:not(.c-btn) {
    text-decoration: underline;
  }

  blockquote {
    margin-left: -2.5rem;
    width: calc(100% + 5rem);
    padding: 2.5rem;
    background: $c__light-grey;
  }

  ul, ol {
    margin-left: 40px;
  }
}
